<template>
  <div class="dev-bf-card" style="width:300px;margin:0 auto;">
    <bf-card title="标题">
      内容内容内容内容内容内容内容内容内容内容
      内容内容内容内容内容内容内容内容内容内容
      内容内容内容内容内容内容内容内容内容内容
      内容内容内容内容内容内容内容内容内容内容
      内容内容内容内容内容内容内容内容内容内容
      <div class="box" slot="extra">右标题</div>
    </bf-card>
    <hr />

    <p>禁用鼠标悬停</p>
    <hr />

    <bf-card no-hover title="标题">
      内容内容内容内容内容内容内容内容内容内容
      内容内容内容内容内容内容内容内容内容内容
      内容内容内容内容内容内容内容内容内容内容
      内容内容内容内容内容内容内容内容内容内容
      内容内容内容内容内容内容内容内容内容内容
      <div class="box" slot="extra">右标题</div>
    </bf-card>
    <hr />

    <p>noBorder</p>
    <hr />

    <bf-card no-border title="标题">
      内容内容内容内容内容内容内容内容内容内容
      内容内容内容内容内容内容内容内容内容内容
      内容内容内容内容内容内容内容内容内容内容
      内容内容内容内容内容内容内容内容内容内容
      内容内容内容内容内容内容内容内容内容内容
      <div class="box" slot="extra">右标题</div>
    </bf-card>
    <hr />

    <p>bodyPadding及footer</p>

    <hr />
    <bf-card bodyPadding="0">
      <img
        class="dev-bf-card-avatar"
        src="https://img2.baidu.com/it/u=2102736929,2417598652&fm=26&fmt=auto&gp=0.jpg"
        alt
      />
      <div class="dev-bf-card-content">
        <h3>动漫</h3>内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容
        内容内容内容内容内容内容内容内容内容内容
      </div>
    </bf-card>
  </div>
</template>

<style lang="scss" scoped>
.dev-bf-card {
  .dev-bf-card-avatar {
    width: 100%;
  }
  .dev-bf-card-content {
    padding: 16px;
  }
  .dev-bf-card-footer {
    display: flex;
    justify-content: space-between;
    & > * {
      flex: 1;
      font-size: 20px;
      text-align: center;
      cursor: pointer;

      &:hover {
        color: #2d8cf0;
      }
    }
  }
}
</style>
